<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 
    - primary meta tags
  -->
  <title>博客 - 610的书窝</title>
  <meta name="title" content="博客 - 610的书窝">
  <meta name="description" content="欢迎来到610书窝的博客页面，这里有最新的读书心得、书评和活动分享">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - Font Awesome CDN Link (Added)
  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">
</head>

<body id="top">

  <!-- 
    - #HEADER
  -->
  <header class="header" data-header>
    <div class="header-top">
      <div class="container">

        <a href="index.html" class="logo">
          <img src="./assets/images/logo.svg" width="138" height="28" alt="booken home">
        </a>

        <div class="input-wrapper">
          <input type="search" name="search" placeholder="搜索我们的博客" class="input-field">

          <button class="btn btn-primary">搜索</button>
        </div>

        <div class="header-action">

          <a href="./cart.html" class="header-action-btn" aria-label="cart" title="购物车">
            <span class="span">3</span>
            <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
          </a>

          <button class="nav-open-btn" aria-label="open menu" title="打开菜单" data-nav-toggler>
            <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
          </button>

          <a href="./login.html" class="header-action-btn" aria-label="user" title="登录/注册">
            <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
          </a>

        </div>

      </div>
    </div>

    <div class="header-bottom" data-navbar>
      <div class="container">

        <nav class="navbar">

          <button class="nav-close-btn" data-nav-toggler aria-label="close menu" title="关闭菜单">
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

          <div class="navbar-top">
            <input type="search" name="search" placeholder="搜索我们的博客" class="input-field">

            <button class="search-btn" aria-label="Search">
              <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
            </button>
          </div>

          <ul class="navbar-list">

            <li>
              <a href="index.html" class="navbar-link">首页</a>
            </li>

            <!-- 博客导航项 - 当前激活页面 -->
            <li>
              <a href="blog.html" class="navbar-link navbar-link-cute blog-link"
                style="background-color: var(--pastel-blue);">
                <span class="cute-icon">📚</span>
                博客
                <span class="cute-bubble">读好文~</span>
              </a>
            </li>

            <!-- 商店导航项 -->
            <li>
              <a href="shop.html" class="navbar-link navbar-link-cute shop-link">
                <span class="cute-icon">🛍️</span>
                商店
                <span class="cute-bubble">买买买~</span>
              </a>
            </li>

            <!-- 关于我们导航项 -->
            <li>
              <a href="about.html" class="navbar-link navbar-link-cute about-link">
                <span class="cute-icon">🏡</span>
                关于我们
                <span class="cute-bubble">认识我们~</span>
              </a>
            </li>

            <!-- 联系方式导航项 -->
            <li>
              <a href="contact.html" class="navbar-link navbar-link-cute contact-link">
                <span class="cute-icon">✉️</span>
                联系方式
                <span class="cute-bubble">找到我们~</span>
              </a>
            </li>

          </ul>

        </nav>

        <a href="tel:+15813316885" class="header-contact-link">
          <ion-icon name="headset-outline" aria-hidden="true"></ion-icon>

          <span class="span">(+86) 15813316885</span>
        </a>

      </div>
    </div>

    <div class="overlay" data-overlay data-nav-toggler></div>
  </header>

  <main>
    <article>

      <!-- 
        - #博客页面标题部分
      -->
      <section class="section hero has-bg-image" aria-label="blog-hero"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <div class="hero-content">

            <h1 class="h1 hero-title has-after">
              610书窝 <br>
              博客专栏
            </h1>

            <p class="hero-text">
              在这里，我们分享关于书籍的一切：阅读心得、书评、新书推荐、读书活动等等～
            </p>

          </div>

        </div>
      </section>

      <!-- 
        - #博客分类栏
      -->
      <section class="section">
        <div class="container">
          <!-- 博客分类标签 -->
          <ul class="filter-list">
            <li>
              <button class="filter-btn active" data-filter-btn="all">全部</button>
            </li>
            <li>
              <button class="filter-btn" data-filter-btn="book-review">书评</button>
            </li>
            <li>
              <button class="filter-btn" data-filter-btn="reading-notes">读书笔记</button>
            </li>
            <li>
              <button class="filter-btn" data-filter-btn="events">活动分享</button>
            </li>
          </ul>
        </div>
      </section>

      <!-- 
        - #博客列表部分
      -->
      <section class="section blog">
        <div class="container">

          <h2 class="h2 section-title">最新博客文章</h2>

          <p class="section-text">
            以下是我们最新发布的博客文章，希望你能找到喜欢的内容～
          </p>

          <div class="grid-list">

            <!-- 博客卡片1 -->
            <div class="blog-card">
              <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                <img src="./assets/images/blog-1.jpg" width="600" height="400" loading="lazy" alt="如何培养阅读习惯"
                  class="img-cover">
              </figure>

              <div class="card-content">
                <h3 class="h3">
                  <a href="#" class="card-title">如何培养阅读习惯：每天读书30分钟的奇迹</a>
                </h3>

                <ul class="card-meta-list">
                  <li class="meta-item">
                    <time class="meta-link" datetime="2025-04-10">2025年4月10日</time>
                  </li>
                  <li class="meta-item">
                    <a href="#" class="meta-link">5 条评论</a>
                  </li>
                </ul>

                <p class="card-text">
                  在这个快节奏的时代，培养阅读习惯变得越来越困难。本文将分享如何在繁忙的生活中挤出时间阅读，并使之成为习惯...
                </p>

                <a href="#" class="btn card-btn">阅读更多...</a>
              </div>
            </div>

            <!-- 博客卡片2 -->
            <div class="blog-card">
              <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                <img src="./assets/images/blog-2.jpg" width="600" height="400" loading="lazy" alt="2025年值得期待的10本新书"
                  class="img-cover">
              </figure>

              <div class="card-content">
                <h3 class="h3">
                  <a href="#" class="card-title">2025年值得期待的10本新书推荐</a>
                </h3>

                <ul class="card-meta-list">
                  <li class="meta-item">
                    <time class="meta-link" datetime="2025-03-25">2025年3月25日</time>
                  </li>
                  <li class="meta-item">
                    <a href="#" class="meta-link">8 条评论</a>
                  </li>
                </ul>

                <p class="card-text">
                  2025年即将有许多令人期待的新书出版，从小说到非虚构，从科幻到历史，这里我们精选了10本最值得期待的新书...
                </p>

                <a href="#" class="btn card-btn">阅读更多...</a>
              </div>
            </div>

            <!-- 博客卡片3 -->
            <div class="blog-card">
              <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                <img src="./assets/images/blog-3.jpg" width="600" height="400" loading="lazy" alt="读书会活动回顾"
                  class="img-cover">
              </figure>

              <div class="card-content">
                <h3 class="h3">
                  <a href="#" class="card-title">3月读书会活动回顾：《百年孤独》讨论</a>
                </h3>

                <ul class="card-meta-list">
                  <li class="meta-item">
                    <time class="meta-link" datetime="2025-03-15">2025年3月15日</time>
                  </li>
                  <li class="meta-item">
                    <a href="#" class="meta-link">12 条评论</a>
                  </li>
                </ul>

                <p class="card-text">
                  上周六，我们举办了一场关于加西亚·马尔克斯的《百年孤独》的读书会。在这次活动中，大家分享了对这部文学经典的理解...
                </p>

                <a href="#" class="btn card-btn">阅读更多...</a>
              </div>
            </div>

            <!-- 博客卡片4 -->
            <div class="blog-card">
              <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                <img src="./assets/images/blog-1.jpg" width="600" height="400" loading="lazy" alt="数字阅读与纸质书的比较"
                  class="img-cover">
              </figure>

              <div class="card-content">
                <h3 class="h3">
                  <a href="#" class="card-title">数字阅读与纸质书：各有千秋的阅读体验</a>
                </h3>

                <ul class="card-meta-list">
                  <li class="meta-item">
                    <time class="meta-link" datetime="2025-03-05">2025年3月5日</time>
                  </li>
                  <li class="meta-item">
                    <a href="#" class="meta-link">15 条评论</a>
                  </li>
                </ul>

                <p class="card-text">
                  随着电子书和有声书的普及，数字阅读已经成为现代阅读方式的重要组成部分。然而，纸质书依然有其不可替代的魅力...
                </p>

                <a href="#" class="btn card-btn">阅读更多...</a>
              </div>
            </div>

            <!-- 博客卡片5 -->
            <div class="blog-card">
              <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                <img src="./assets/images/blog-2.jpg" width="600" height="400" loading="lazy" alt="如何整理你的书架"
                  class="img-cover">
              </figure>

              <div class="card-content">
                <h3 class="h3">
                  <a href="#" class="card-title">如何整理你的书架：让书籍既美观又实用</a>
                </h3>

                <ul class="card-meta-list">
                  <li class="meta-item">
                    <time class="meta-link" datetime="2025-02-28">2025年2月28日</time>
                  </li>
                  <li class="meta-item">
                    <a href="#" class="meta-link">7 条评论</a>
                  </li>
                </ul>

                <p class="card-text">
                  对于书籍爱好者来说，一个整洁而有组织的书架不仅实用，还能成为家中的亮点装饰。本文将分享一些书架整理的技巧...
                </p>

                <a href="#" class="btn card-btn">阅读更多...</a>
              </div>
            </div>

            <!-- 博客卡片6 -->
            <div class="blog-card">
              <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                <img src="./assets/images/blog-3.jpg" width="600" height="400" loading="lazy" alt="儿童阅读指南"
                  class="img-cover">
              </figure>

              <div class="card-content">
                <h3 class="h3">
                  <a href="#" class="card-title">儿童阅读指南：如何为不同年龄段的孩子选择合适的书籍</a>
                </h3>

                <ul class="card-meta-list">
                  <li class="meta-item">
                    <time class="meta-link" datetime="2025-02-20">2025年2月20日</time>
                  </li>
                  <li class="meta-item">
                    <a href="#" class="meta-link">10 条评论</a>
                  </li>
                </ul>

                <p class="card-text">
                  培养孩子的阅读兴趣对其未来发展至关重要。本文将根据不同年龄段的特点，为家长提供选择适合孩子阅读书籍的建议...
                </p>

                <a href="#" class="btn card-btn">阅读更多...</a>
              </div>
            </div>

          </div>

          <!-- 分页 -->
          <div class="pagination" style="margin-top: 50px; text-align: center;">
            <a href="#" class="btn">上一页</a>
            <span class="page-number" style="margin: 0 15px; color: var(--dark-pink-text);">第 1 页，共 5 页</span>
            <a href="#" class="btn">下一页</a>
          </div>

        </div>
      </section>

    </article>
  </main>

  <!-- 
    - #FOOTER
  -->
  <footer class="footer has-bg-image" style="background-image: url('./assets/images/section-bg.jpg')">

    <div class="footer-top section">
      <div class="container grid-list">

        <div class="footer-brand">

          <a href="#" class="logo">
            <img src="./assets/images/logo.svg" width="138" height="28" alt="610书窝 Logo">
          </a>

          <p class="footer-text">
            欢迎来到610书窝！你的专属宿舍阅读角~ 📚✨
          </p>

          <ul class="social-list">
            <li>
              <a href="#" class="social-link" title="QQ">
                <i class="fa-brands fa-qq"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微信">
                <i class="fa-brands fa-weixin"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微博">
                <i class="fa-brands fa-weibo"></i>
              </a>
            </li>
          </ul>

        </div>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">关于书窝</p>
          </li>

          <li>
            <a href="#" class="footer-link">书窝故事</a>
          </li>

          <li>
            <a href="./members.html" class="footer-link">成员介绍</a>
          </li>

          <li>
            <a href="#" class="footer-link">加入我们?</a>
          </li>

          <li>
            <a href="#" class="footer-link">书友Q&A</a>
          </li>

          <li>
            <a href="#" class="footer-link">好书推荐</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">书友指南</p>
          </li>

          <li>
            <a href="#" class="footer-link">借阅规则</a>
          </li>

          <li>
            <a href="#" class="footer-link">图书分类</a>
          </li>

          <li>
            <a href="#" class="footer-link">荐购通道</a>
          </li>

          <li>
            <a href="#" class="footer-link">书单分享</a>
          </li>

          <li>
            <a href="#" class="footer-link">活动日历</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">特色活动</p>
          </li>

          <li>
            <a href="#" class="footer-link">读书分享会</a>
          </li>

          <li>
            <a href="#" class="footer-link">主题书展</a>
          </li>

          <li>
            <a href="#" class="footer-link">好物交换</a>
          </li>

          <li>
            <a href="#" class="footer-link">考试周加油站</a>
          </li>

          <li>
            <a href="#" class="footer-link">留言板</a>
          </li>

        </ul>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          © 2025 610书窝 | 由舍友们用心维护~ ❤️
        </p>

      </div>
    </div>

  </footer>

  <!-- 
    - #BACK TO TOP
  -->
  <a href="#top" class="back-top-btn" aria-label="返回顶部" data-back-top-btn>
    <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
  </a>

  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>